*{
  padding: 0;
  margin: 0;
  user-select: none;
}
.full{
  width: 100%;
  height: 100%;
}
ul{
  list-style:none ;
}
input{
  background-color: none;
  outline: none;
  border: 0px;
}
input::-webkit-input-placeholder{
  color: skyblue;
  font-size: 10px;

  }

.headbox{
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  transition: all  0.3s;
  background-color: rgb(243,245,246);
}




.contain{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;

  width: 160rem;
  height: 100%;
}
.logoBox{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 220px;
  height: 100%;
}

.logoimage{
  height: 40px;
  width: 40px;
}

.logoText{
  width: 151px;
  height: 27px;
}

/* 导航栏部分 */

.zhanwei{
  width: 100%;
  height: 70px;
  background-color: white;
}
.directionBox{
  width: 70rem;
  height: 100%;
}


.directionBox li{
  cursor: pointer;
  float: left;
  width: 25%;
  height: 70px;
  box-sizing: border-box;
  line-height: 70px;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: rgb(69, 69, 69);
  transition: color  0.3s;
}
.directionBox li:hover{
  border-bottom: 3px solid skyblue;
}


/* 用户 */

.userBox{
  display: flex;
  align-items: center;
  height: 50px;
}
.userImage{
  width: 30px;
  height: 30px;
  background-color: skyblue;
  border-radius: 30px;
  overflow: hidden;
}
.userName{
  min-width: 120px;
  height: 30px;
  margin-left: 10px;
  line-height: 30px;
  font-weight: 900;
  color: rgb(140, 138, 138);
}

.bannerBox{
  width: 100%;
  height: 350px;
}

.contain2{
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 160rem;
  margin-top: 30px;
}

.container{
  margin: 0 auto;
  width: 1220px;
  background-color: rgb(255, 255, 255);
}

.body{
  width: 100%;
  min-width: 1230px;
}


.bodyHead{
  display: flex;
  align-items: center;
  width: 100%;
  height: 120px;

  justify-content: space-between;
}

.courseList{
  width: 100%;
  background-color: white;
}

.bodyHeadTitle{
  display: flex;
  align-items: center;
  width: 350px;
  height: 80px;
}
.titleImage{
  width: 126px;
  height: 46px;
}
.title{
  width: 200px;
  height: 50px;

  line-height: 61px;
  margin-left: 14px;
  color: rgb(152, 152, 152);
}

.searchCourseBox{
  display: flex;
  height: 50px;
}
.searcchImage{
  cursor: pointer;
  width: 40px;
  height: 40px;
  background-color: skyblue;
}
.courseSearch{
  height: 40px;
  width: 250px;
  background-color: white;

  box-sizing: border-box;
  padding-left: 20px;
  border-radius: 5px 0px 0px 5px;
  border-left: 1px solid silver;
  border-top: 1px solid silver;
  border-bottom: 1px solid silver;
}

.courseList{
  width: 100%;
}

.courseHead{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
}
.headPaiXue{
  text-align: center;
  line-height: 30px;
  width: 90px;
  height: 30px;
  border-radius: 25px;
  background-color: rgb(68, 67, 67);
  color: white;
}

.bodyhead{
  width: 100%;
  height: 120px;
  background-color: rgb(243,245,246);
}

.coures{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.courseItem{
  width:291px;
  height: 309px;

  margin-bottom: 20px;

  border-radius: 10px 10px 0px 0px;
  overflow: hidden;
}
.itemHead{
  width: 100%;
  height: 173px;
  background-color: skyblue;
}
.courseName{

height: 40px;
color: #545c63;
font-size: 15px;
margin-top: 8px;

padding: 0px 8px;
}
.courseTrait{
  font-size: 12px;
  color: #9199a1;

  padding: 0px 8px;
}

.coursePay{
  display: flex;

  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 0px 8px;

  margin-top: 16px;
}
.courseMoney{
  flex: 1;
  height: 100%;

  line-height: 40px;
  color: red;
  font-size: 14px;
  font-weight: bold;

}
.courseShopcar{
  cursor: pointer;
  width: 100px;
  height: 40px;
  color: rgb(245, 40, 40);
  line-height: 40px;
}

.pagination{

  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 650px;
  height: 50px;

}
.pageNext,
.pageLast{
  cursor: pointer;
  width: 50px;
  height: 50px;

  text-align: center;
  line-height: 50px;
}
.pageLast:hover{
  color: skyblue;
}
.pageNext:hover{
  color: skyblue;
}
.pageList{
  display: flex;
  height: 50px;

}
.pageItem{
  cursor: pointer;
  width: 41px;
  height: 41px;
  line-height: 41px;
  text-align: center;
  margin-left: 20px;


}
.active1{
  border-radius: 41px;
  background-color: rgb(95, 92, 92);
  color: white;
  font-weight: bold;
}

@media screen and (max-width:1312px) {
  html{
    font-size: 6.5px !important;
  }
}
@media screen and (min-width:1312px) {
  html{
    font-size: 7px !important;
  }
}
@media screen and (min-width:1400px) {
  html{
    font-size: 8px !important;
  }
}
